import React,{PureComponent} from 'react'
import {Form,Input,Select} from 'antd'
import PropTypes from 'prop-types'

const Item=Form.Item
const Option=Select.Option

class AddForm extends PureComponent{
 static propTypes={
    setForm:PropTypes.func.isRequired, //接收父组件传过来的setForm函数
 }

 componentWillMount(){
     this.props.setForm(this.props.form) //把当前页面的form通过setForm函数传到父组件
 }

 render(){

    //表单样式控制
    const formItemLayout = {
        labelCol:{ span: 5,offset:0 },
        wrapperCol:{ span: 15,offset:0 }
      }

    const { getFieldDecorator }=this.props.form //form组件的获取表单验证函数
     return(
        //  表单样式控制 {...formItemLayout}
         <Form {...formItemLayout} > 
            
            <Item label='资料名'> 
                 {
                 getFieldDecorator('name',{
                     initialValue:'',
                     rules:[{required:true,message:'资料名必须输入'}]
                 })(<Input placeholder='请输入资料名' />)
                 }     
             </Item>
             <Item label='资料图片'> 
                 {
                 getFieldDecorator('image',{
                     initialValue:'',
                     rules:[{required:true,message:'图片地址必须输入'}]
                 })(<Input placeholder='请输入图片地址' />)
                 }     
             </Item>
             <Item label='资料地址'> 
                 {
                 getFieldDecorator('content',{
                     initialValue:'',
                     rules:[{required:true,message:'资料地址必须输入'}]
                 })(<Input placeholder='请输入资料地址' />)
                 }     
             </Item>


             
         </Form>
     )
 }
}
//为当前组件添加一个form对象
export default Form.create()(AddForm)
